<template>
    <div class="main">
        <!-- 模态框 -->
        <Modal v-model="datas.deleBtn" title="确认删除框">
            <p>确认删除多条纪录码？</p>
        </Modal>
        <!-- 多个删除/搜索 -->
      <Row style="margin-bottom:20px">
            <Col span="2">
               <Button type="primary" @click="deleteMany">删除多个</Button>
            </Col>
            <Col span="6">
                <Input search enter-button="Search" placeholder="Enter something..." />
            </Col>
        </Row>
        <!-- 表格 -->
      <Table
        border
        @on-selection-change="onSelect"
        :columns="datas.columns"
        :data="datas.rows">
      </Table>
      <!-- 分页 -->
      <Page
        :total="datas.total"
        show-sizer
        @on-change="onPageChange"
        :page-size-opts="[2,5,10]"
        @on-page-size-change="onPageSizeChange"
        style="margin-top:20px"
      />
    </div>
</template>

<script>
export default {
    props:{
        datas:{
            type:Object
        }
    },
    methods: {
            //移除单个选项
            remove(id) {
                this.$Modal.confirm({
                    title: "确认删除码？",
                    content: "<p>确认删除重要数据嘛？</p>",
                    onOk: () => {
                    //把删除事件拿过来
                    this.$store.dispatch(this.datas.Delete, id).then(() => {
                        //更新表格
                        this.getList();
                    });
                    },
                    onCancel: () => {
                        this.$Message.info("已取消删除数据操作");
                    }
                });
            },
        //最主要的更新数据函数
        getList() {
            this.$store
                .dispatch(this.datas.List, { page: this.datas.page, limit: this.datas.limit })
                .then(() => {
                    //把获取传递回来的是数据赋值
                    console.log(this.$store.state.product.data.rows)
                    this.datas.rows = this.$store.state.product.data.rows;
                    this.datas.total = this.$store.state.product.data.total;
                });
            },
            onPageChange(page) {
                //更改页码以及显示
                this.datas.page = page;
                this.getList();
            },
            onPageSizeChange(pageSize) {
                //更改限制条数以及显示
                this.datas.limit = pageSize;
                this.getList();
            },
            //获取多条选中的id
            onSelect(selection){
                this.selectionArray=[];//初始化
                if(selection!=undefined){
                    for(let i=0;i<selection.length;i++){
                        this.datas.selectionArray.push(selection[i]._id);
                    }
                }
            },
            deleteMany() {
                this.$Modal.confirm({
                    title: "提示消息框？",
                    content: "<p>确认删除多条重要数据嘛？</p>",
                    onOk: () => {
                    //把删除事件拿过来
                        this.$store.dispatch(this.datas.Removes,this.datas.selectionArray).then(() => {
                            this.getList()
                            this.$Message.info("删除成功");
                        });
                    },
                    onCancel: () => {
                        this.$Message.info("已取消删除数据操作");
                    }
                });
                }
            },
            mounted(){
                //mounted挂载显示数据
                this.getList();
            }
}
</script>

<style>

</style>
